<template>
    <div class="container">
        <div class="top-container">
            <div class="top-left">
                <h2>啊对对队系统V1.0.1</h2>
                <el-icon @click="handleCollapse" size="20" color="#fff" style="margin-left: 8px; ">
                    <setting />
                </el-icon>
            </div>

            <el-dropdown @command="onCommand">
                <span class="el-icon--right">{{ username }}</span>
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item command="goHome">首页</el-dropdown-item>
                        <el-dropdown-item command="logout">退出登录</el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
        </div>
        <div class="bottom-container">
            <div class="menu-container">
                <el-menu background-color="rgb(50, 65, 87)" text-color="#fff" active-text-color="#ffd04b" :router="true"
                    :default-active="defaultActive" class="el-menu-vertical-demo" :default-openeds="['1', '3']"
                    :collapse="isCollapse">
                    <el-menu-item index="/index">
                        <!-- 一级菜单 -->
                        <el-icon>
                            <message />
                        </el-icon>
                        <span>首页</span>
                    </el-menu-item>
                    <el-sub-menu v-for="item in storeMenus" :key="item.id" :index="item.name">
                        <!-- 一级菜单 -->
                        <template #title>
                            <el-icon>
                                <message />
                            </el-icon>
                            <span>{{ item.title }}</span>
                        </template>
                        <!-- 二级菜单 -->
                        <el-menu-item-group  v-for="el in item.children" :key="el.id" v-show="el.hidden==1?false:true">
                            <el-menu-item :index="'/' + item.name + '/' + el.name">{{ el.title }}</el-menu-item>
                        </el-menu-item-group>
                    </el-sub-menu>
                </el-menu>
            </div>
            <div class="main-container">
                <Breadcrumb></Breadcrumb>
                <RouterView />
            </div>
        </div>
    </div>
</template>
  
<script lang="ts" setup>
import { ref, computed, watch } from 'vue'
import { Menu as IconMenu, Message, Setting } from '@element-plus/icons-vue'
import { useMenusStroe } from '../stores/menus'
import { useUserInfoStore } from '../stores/userInfo'
import * as api from '../request/api'
import { useRouter, useRoute, RouterView } from 'vue-router';
import Cookies from 'js-cookie'
import Breadcrumb from '../components/Breadcrumb.vue'
import { usebrdeadcrumb } from '../stores/breadcrumb'
let brdeadcrumb = usebrdeadcrumb()


// 获取pinia的菜单栏数据
let menusStore = useMenusStroe()
let storeMenus = computed(() => {
    return menusStore.sortedMenus
})
// console.log("storeMenus",storeMenus);

let username = ref('')
const userInfoStore = useUserInfoStore();
username.value = userInfoStore.username
// console.log(menusStore);

// 菜单栏折叠
let isCollapse = ref(false)
let handleCollapse = () => {
    isCollapse.value = !isCollapse.value
}

// 默认的高亮菜单
let defaultActive = ref('/index');
// 我应该从 路由跳转 ，判断当前是在哪一个页面，从而知道菜单栏的子菜单应该谁要高亮
watch(
    useRoute(),   // 类似于vue2 的 this.$route
    (newVal) => {
        // console.log(newVal);
        defaultActive.value = newVal.path;
        // console.log(newVal.meta.parentPath);
        brdeadcrumb.chegebrdeadarr(newVal.meta)
    }, {
    immediate: true
}
)


// 下拉菜单的单机事件
const router = useRouter()
let onCommand = (command: string | number | object) => {
    // console.log(command);
    if (command === 'goHome') {
        router.push('/index')
    } else if (command === 'logout') {
        // 清空menus
        menusStore.updateMenus([])  // 根据我们前置守卫的逻辑 , 需要清空菜单栏数据，才会重新获取个人用户信息
        userInfoStore.updataUserInfo("", [])
        console.log('退出登录i');
        // 清空token 
        Cookies.remove('token')  // 不删除 token  无法条找的登录页面

        // 删除路由记录
        // const allRouters = router.getRoutes()
        // console.log(allRouters);

        // allRouters.forEach( (el) => {
        //     if(el.name !== 'index' && el.name !== 'login' && el.name !== 'home'){
        //         router.removeRoute(el.name)
        //     }
        // })

        // 回到login页面
        router.push('/login')
    }

}


</script>
  
<style lang="scss" scoped>
.container {
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;

    .top-container {
        height: 70px;
        background-color: #409eff;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 50px;

        .top-left {
            display: flex;
        }

        .el-icon--right {
            color: #fff;
        }
    }

    .bottom-container {
        display: flex;
        flex: 1;
        overflow: hidden;

        .menu-container {
            height: 100%;
            overflow-y: auto;
            color: #fff;
            text-align: center;

            &::-webkit-scrollbar {
                width: 0;
            }

            .el-menu {
                height: 100%;
            }

            // .el-menu--vertical
            .el-menu-vertical-demo:not(.el-menu--collapse) {
                width: 250px;
            }

        }

        .main-container {
            flex: 1;
            overflow-y: auto;
            // padding: 20px;
        }
    }
}
</style>
  